<template>
	<view class="flex-column">
		<view class="content">
			<image class="logo" src="../../static/img/logo.png"/>
			<view class="mainInfo">
				<text class="title">v{{ versionInfo.currentversion }}</text>
			</view>
			<text class="line" />
		</view>
		<view>
			<view class="infoContentTitle">
				<image class="infoPic" src="../../static/img/sync.png" />
				<text class="infoTitle">最新版本</text>
			</view>
			<view class="infoContent">
				<text class="updateInfo">v{{ versionInfo.edition }}</text>
			</view>
		</view>
		<view>
			<view class="infoContentTitle">
				<image class="infoPic" src="../../static/img/info-circle.png" />
				<text class="infoTitle">更新摘要</text>
			</view>
			<view class="infoContent">
				<text class="updateInfo">{{ versionInfo.content }}</text>
			</view>
		</view>
		<view class="minorContent bottom_aera">
			<view v-if="startProgress && !currentIsLatest" class="smallTitle">
				<text>下载进度:{{ downloadProgress }}%</text>
				<progress :percent="downloadProgress" stroke-width="4" />
			</view>
			<button v-if="!startProgress && !currentIsLatest" type="primary" @click="onSureClick()">立即更新</button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				versionInfo:'',
				
				startProgress: false, // 下载进行 - 标记
				currentIsLatest: false ,// 当前版本就是最新版本 - 标记
				downloadProgress: 0, // 下载进度
				isBackPress: true ,// 是否可以返回
			}
		},
		onBackPress() {
			/* 
			 * 屏蔽返回键
			 */
			if (!this.isBackPress) {
				uni.showToast({
					title: '更新不能跳过！',
					icon: 'none'
				})
				return true
			}
		},
		onLoad() {
			this.versionInfo = uni.getStorageSync('versionInfo');
			
			if (this.versionInfo.status == 10){
				this.currentIsLatest = true;
			}else{
				this.isBackPress = false
				this.currentIsLatest = false;
			}
		},
		
		methods: {
			onSureClick(){
				
				var _this = this;
				
				var platform = uni.getSystemInfoSync().platform
				if(platform == 'ios'){
					plus.runtime.openURL(_this.versionInfo.url);
				}else{
					_this.startProgress = true
					_this.isBackPress = false;
					var downloadTask = uni.downloadFile({
						url: _this.versionInfo.url,
						success: (downloadResult) => {
							console.log(downloadResult);
							if (downloadResult.statusCode === 200) {
								plus.runtime.install(downloadResult.tempFilePath, {
									force: false
								}, function() {
									plus.runtime.restart();
								}, (e) => {
									console.log(e);
									_this.startProgress = false;
									uni.showToast({
										title: '安装升级包失败',
										icon: 'none'
									})
								});
							}
						}
					});
					downloadTask.onProgressUpdate((e)=>{
						_this.downloadProgress = e.progress
					})
				}
			}
		}
	}
</script>

<style>
	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.content {
		text-align: center;
	}


	.process {
		margin-top: 200upx;
		margin-left: 30%;
	}

	.logo {
		height: 150upx;
		width: 150upx;
		margin-top: 50upx;
	}
	
	.mainInfo{
		margin-top: 30upx;
	}

	.title {
		font-size: 36upx;
		color: #373737;
		font-weight: bold;
	}

	.infoTitle {
		font-size: 32upx;
		color: #373737;
		padding-left: 15upx;
		font-weight: bold;
	}

	.tip {
		font-size: 28upx;
		color: #7E7E83;
		vertical-align: text-top;
	}

	.bottom_aera {
		position: absolute;
		bottom: 0;
		height: 12%;
		width: 90%;
	}
	.minorContent {
		padding: 0 5%;
	}

	.line {
		padding: 0 600upx;
		border-bottom: 2upx solid #D8D8D8;
	}

	.infoPic {
		height: 50upx;
		width: 50upx;
	}

	.infoContentTitle {
		display: flex;
		align-items: center;
		padding: 40upx 40upx;
	}

	.infoContent {
		display: flex;
		align-items: center;
	}

	.updateInfo {
		font-size: 28upx;
		color: #7E7E83;
		padding: 0 80upx;
	}

	.smallTitle {
		font-size: 26upx;
		font-weight: 500;
		padding: 20upx 0;
		line-height: 1.5;
		color: #888;
	}
</style>
